<template>
  <div class="layout-card" style="min-height: auto" v-if="titleButton">
    <div class="card-content card-search">
      <div class="content-bar" v-if="headtitle != '0'">
        <div class="title">
          <slot name="title">{{ headtitle }}</slot>
        </div>
      </div>
      <FilterBar
        ref="FilterRef"
        :close-collapse="true"
        :filters="filters"
      />
    </div>
  </div>
  <div class="layout-card" v-else-if="hasButton">
    <div v-if="isFilters" class="card-content card-search">
      <div class="content-bar">
        <div class="title">
          <!-- 搜索栏标题 #title -->
          <slot name="title">{{ headtitle }}</slot>
        </div>
      </div>
      <FilterBar
        ref="FilterRef"
        :close-collapse="true"
        :filters="filters"
        :hasButton="hasButton"
        :rules="rules"
        @search-change="onSearch"
        @search-reset="onReset"
        @on-toggle="(val: any)=>$emit('on-toggle',val)"
      />
    </div>
    <div class="card-content">
      <div class="content-bar">
        <div class="title">
          <!-- 列表标题 #title -->
          <slot name="title">{{ headline }}</slot>
        </div>
        <div>
          <!-- 操作栏 #search -->
          <slot name="action"></slot>
        </div>
      </div>
      <div class="card-main">
        <FilterBar
          ref="FilterRef"
          :close-collapse="true"
          :filters="buttonFilters"
          :hasButton="hasButton"
          :hasTableButton="hasTableButton"
          :rules="rules"
          v-if="hasTableButton"
          @search-change="onSearch"
          @search-reset="onReset"
          @on-toggle="(val: any)=>$emit('on-toggle',val)"
        />
        <!-- 页面主要内容 #default -->
        <slot></slot>
      </div>
    </div>
  </div>
  <!-- 该div用于显示弹窗样式 -->
  <div class="layout-card" v-else style="background-color: #FFF">
    <FilterBar
      ref="FilterRef"
      :close-collapse="true"
      :filters="filters"
      :hasButton="hasButton"
      :rules="rules"
      @search-change="onSearch"
      @search-reset="onReset"
      @on-toggle="(val: any)=>$emit('on-toggle',val)"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, useAttrs } from 'vue'
import FilterBar from '@/components/FilterBar/index.vue'
import { FieldsItemType, FilterItem } from '@/components/FilterBar/types'

const attrs = useAttrs()
// 标题
const headline = attrs.headline ? attrs.headline : '数据列表'
const headtitle = attrs.headtitle ? attrs.headtitle : '信息列表' // 此属性为搜索栏标题属性 7-17新增
const hasButton = attrs.hasButton ? attrs.hasButton : true // 此属性为搜索栏标题属性 7-17新增
const titleButton = attrs.titleButton ? attrs.titleButton : false // 此属性为不带搜索栏标题属性 7-24新增
const hasTableButton = attrs.hasTableButton ? attrs.hasTableButton : false // 此属性为搜索栏标题属性 7-17新增

const props = defineProps<{ buttonFilters?: FilterItem[]; filters?: FilterItem[]; modelValue?: FieldsItemType, rules?: any }>()
const emits = defineEmits(['search-change', 'search-reset', 'on-toggle', 'update:modelValue'])
const isFilters = Array.isArray(props.filters) && props.filters.length > 0
const FilterRef = ref()

const setFieldsValue = (data: FieldsItemType) => {
  FilterRef.value?.setFieldsValue(data)
}
const onSearch = (value: FieldsItemType) => {
  emits('update:modelValue', value)
  emits('search-change', value)
}
const onReset = (value: FieldsItemType) => {
  emits('update:modelValue', value)
  emits('search-reset', value)
}

defineExpose({
  setFieldsValue
})
</script>

<style scoped lang="less">
.layout-card {
  background: #f5f7f9;
  min-height: 100%;
  overflow: hidden;
  @titleFontFamily: "HarmonyOS_Sans_SC_Medium";
  .card-content {
    padding: 24px;
    margin: 12px;
    background: #FFF;
    border-radius: 8px;
    &.card-search {
      padding-bottom: 0;
    }
    .content-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      .title {
        font-size: 16px;
        font-family: @titleFontFamily;
        border-left: #2F7DF1 2px solid;
        text-indent: 1em;
        color: #353A42;
        line-height: 24px;
        font-weight: bolder;
      }
    }
  }
}
</style>
